<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/layui/css/layui.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/DatePicker.js"></script>
    <title>商品列表</title>
</head>
<body>
<div class="row" style="width:98%;margin-left: 1%;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                会员列表
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <div class="form-group form-inline">
                            <span>商品名称</span>
                            <input type="text" name="name" class="form-control" value="${name}">
                        </div>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <div class="form-group form-inline">
                            <span>上架时间</span>
                            <input type="text" name="pubdate"
                                   class="layui-input form-control"
                                   id="test1" placeholder="时间"
                                   value="${pubdate}"
                                   style="height: 34px;border-radius: 5px;border: 1px solid #ccc;cursor: pointer">
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-primary" id="search"><span
                                class="glyphicon glyphicon-search"></span></button>
                    </div>
                </div>

                <div style="height: 400px;position: relative">
                    <table id="tb_list" class="table table-striped table-hover table-bordered">
                        <tr>
                            <td>序号</td>
                            <td>商品名称</td>
                            <td>价格</td>
                            <td>上架时间</td>
                            <td>类型</td>
                            <td>操作</td>
                        </tr>
                        <c:forEach items="${pageBean.list}" var="goods" varStatus="i">
                            <tr>
                                <td>${i.count}</td>
                                <td>${goods.name}</td>
                                <td>${goods.price}</td>
                                <td>${goods.pubdate}</td>
                                <td>${goods.goodsType.name}</td>
                                <td>
                                    <button class="btn btn-danger btn-xs" onclick="delGood(${goods.id})">删除</button>&nbsp;
                                    <button class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModal${goods.id}" onclick="loddingOpt(${goods.id},${goods.typeid})">修改</button>&nbsp;&nbsp;
                                    <!-- 弹出模态框 -->
                                    <div class="modal fade" tabindex="-1" role="dialog" id="myModal${goods.id}">
                                        <div class="modal-dialog" role="document" style="width: 900px">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal">
                                                        <span>&times;</span>
                                                    </button>
                                                    <h4 class="modal-title">修改类型</h4>
                                                </div>
                                                <form action="${pageContext.request.contextPath }/addGoods?method=update" method="post" enctype="multipart/form-data">
                                                    <input name="id" value="${goods.id}" type="hidden"/>
                                                    <div class="row" style="padding: 20px 0 0 50px;box-sizing: border-box">
                                                        <div class="col-sm-6">
                                                            <div class="form-group form-inline">
                                                                <label>名称:</label>
                                                                <input type="text" name="name" class="form-control" placeholder="商品名" value="${goods.name}"/>
                                                            </div>

                                                            <div class="form-group form-inline">
                                                                <label>分类:</label>
                                                                <select name="typeid" class="form-control seltype${goods.id}">
                                                                    <option value="">------</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group form-inline">
                                                                <label>时间:</label>
                                                                <input type="text" name="pubdate"
                                                                       class="layui-input form-control"
                                                                       id="test1" placeholder="时间"
                                                                       value="${goods.pubdate}"
                                                                       style="height: 34px;border-radius: 5px;border: 1px solid #ccc;cursor: pointer">
                                                                    <%--                    <input type="text" name="pubdate" readonly="readonly" class="form-control" onclick="setday(this)"/>--%>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="form-group form-inline">
                                                                <label>价格:</label>
                                                                <input type="text" name="price" placeholder="价格" value="${goods.price}" class="form-control"/>
                                                            </div>
                                                            <div class="form-group form-inline">
                                                                <label>评分:</label>
                                                                <input type="text" name="star" placeholder="评分" value="${goods.star}" class="form-control"/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row" style="padding: 20px 0 0 50px;box-sizing: border-box">
                                                        <div class="col-sm-10">
                                                            <div class="form-group form-inline">
                                                                <label>商品图片</label>
                                                                <input type="file" name="picture"/>
                                                            </div>
                                                            <div class="col-md-10">
                                                                <img src="${pageContext.request.contextPath}/goodsImgServlet?method=lodding&p=${goods.picture}"
                                                                     alt="原始图片" width="300" height="150">
                                                            </div>
                                                            <div class="form-group ">
                                                                <label>商品简介</label>
                                                                <textarea name="intro" class="form-control" rows="5">${goods.intro}</textarea>
                                                            </div>
                                                            <div class="form-group form-inline text-center">
                                                                <input type="submit" value="修改" class="btn btn-warning"/>
                                                                <input type="reset" value="重置" class="btn btn-default"/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <a tabindex="0" id="example${goods.id}" class="btn btn-primary btn-xs"
                                       role="button" data-toggle="popover"
                                       data-trigger="focus"
                                       data-placement="left"
                                       data-content="${goods.intro}">描述</a>
                                    <script type="text/javascript">
                                        $(function () {
                                            $("#example${goods.id}").popover();
                                        })
                                    </script>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>
                    <div class="col-md-10 text-center" style="color: red">${msg}</div>
                    <c:if test="${pageBean.count > 0}">
                        <nav aria-label="Page navigation" class="text-center"
                             style="position: absolute;left: 37%;bottom: 50px;">
                            <ul class="pagination">
                                <c:if test="${pageBean.pageNum <= 1}">
                                    <li class="disabled">
                                        <a href="#" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                </c:if>
                                <c:if test="${pageBean.pageNum > 1}">
                                    <li>
                                        <a href="${pageContext.request.contextPath}/goodsservlet?method=getGoods&pageNum=${pageBean.pageNum - 1}&pageSize=${pageBean.pageSize}"
                                           aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                </c:if>

                                <c:forEach var="i" begin="${pageBean.startPage}" end="${pageBean.endPage}" step="1">
                                    <c:if test="${i==pageBean.pageNum}">
                                        <li class="active">
                                            <a href="${pageContext.request.contextPath}/goodsservlet?method=getGoods&pageNum=${i}&pageSize=${pageBean.pageSize}">
                                                    ${i}<span class="sr-only">(current)</span>
                                            </a>
                                        </li>
                                    </c:if>
                                    <c:if test="${i!=pageBean.pageNum }">
                                        <li>
                                            <a href="${pageContext.request.contextPath}/goodsservlet?method=getGoods&pageNum=${i}&pageSize=${pageBean.pageSize}">
                                                    ${i}
                                            </a>
                                        </li>
                                    </c:if>
                                </c:forEach>

                                <c:if test="${pageBean.pageNum == pageBean.countPage}">
                                    <li class="disabled">
                                        <a href="#" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </c:if>
                                <c:if test="${pageBean.pageNum < pageBean.countPage}">
                                    <li class="disabled">
                                        <a href="${pageContext.request.contextPath}/goodsservlet?method=getGoods&pageNum=${pageBean.pageNum + 1}&pageSize=${pageBean.pageSize}"
                                           aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </c:if>
                            </ul>
                        </nav>
                    </c:if>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script type="text/javascript">
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        //常规用法
        laydate.render({
            elem: '#test1'
        });
    });
    let delGood = (goodId) =>{
        if(confirm("确认删除嘛?")){
            let url = "${pageContext.request.contextPath}/goodsservlet?method=delGoods&id=" + goodId;
            $.ajax({
                url,
                dataType:"json",
                success: (resp) => {
                    const {data,code,msg} = resp;
                    if(code === 200){
                        alert(msg);
                        window.location.href = "${pageContext.request.contextPath}/goodsservlet?method=getGoods";
                    }else{
                        alert(msg);
                    }
                },
                error: (XMLHttpRequest, textStatus, errorThrown)=>{
                    alert("失败" + XMLHttpRequest.status + ":" + textStatus + ":" + errorThrown);
                }
            })
        }
    }
    let setMsg = (data,id,tid) => {
        $(".seltype"+id).html(`<option value="">------</option>`);
        for(let obj of data){
            let opt = new Option(obj.name,obj.id);
            $(".seltype"+id).append(opt);
        }

        let ops = $(".seltype"+id + ">option");
        for (let i = 0; i < ops.length; i++) {
            if(ops[i].value == tid){
                ops[i].selected = true;
            }
        }
    }
    // 模态框弹出时加载类型
    let loddingOpt = (id,tid) => {
        $.get("${pageContext.request.contextPath}/goodstypeservlet?method=goodstypelist",(resp) => {
            const {code,msg,data} = resp;
            if(code === 200){
                setMsg(data,id,tid);
            }else{
                alert(msg)
            }
        });
    }
    $(document).ready(function () {
        // 搜索按钮点击事件
        $("#search").click(() => {
            let goosname = $("input[name='name']").val();
            let pubdate = $("input[name='pubdate']").val();
            let url = "${pageContext.request.contextPath}/goodsservlet?method=getGoods&pageNum=1&pageSize=${pageBean.pageSize}&name=" + goosname + "&pubdate=" + pubdate;
            window.location.href = url;
        })
    })
</script>
</body>
</html>